<script setup lang="ts">

import {computed, ref,inject,watch,reactive,toRefs} from "vue";
import { Message } from '@arco-design/web-vue'
import route from "@/api/routes/route";
import waybill from '@/api/document/waybill'
import AddModal from "@cps/actions/addModal.vue";
import ShipmentRouteList from "@/views/document/waybill/ShipmentRouteList.vue";
const record = inject('record')
const WaybillList = ref([])
const addModalRef = ref()
const visible = ref(false)
const shipmentRouteList = ref()
const formRef=ref()
const formData = reactive({
      id:'',
      about_id:'',
      remark: '',
      parent_id: '',
      about_type: 'App\\Document\\Model\\Waybill',
      time: ''
})
    const rules = {
      remark: [{required: true,message:'请输入描述', validateTrigger: 'blur'}, ],
      time: [{ required: true, message:'请选择时间',validateTrigger: 'blur'}, ],
    }
    const handleClick = (id) => {
      formData.id='';
      formData.about_id=id;
      formData.remark='';
      formData.time='';
      visible.value = true;
    };
    const routeList = async ()=>{
      console.log(record.value.id)
      let res = await waybill.getAllRoute({id:record.value.id})
      WaybillList.value =  res.data
    }
    routeList()
    //详情数据
    const editAction = async (data) => {
        visible.value = true;   
        formData.id=data.id
        formData.remark=data.remark
        formData.time=data.time
        formData.about_id=data.about_id
    }
    //删除数据
  const deleteAction = async (id,batch=false) => {
    const response = await route.deletes({ids: [id],batch:batch})
    response.success && Message.success(response.message || `删除成功！`)
    routeList()
  }
    //列表请求数据
    let listData={
      pageSize:1000,
      page:1,
      admin:true,
      type:'waybill',
      about_id :''
    }
    //新增
    const handleBeforeOk =async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid) => {
        if (!valid) {
          if(formData.id==''){
            route.save(formData).then(res => {
              Message.success(res.message || `新增成功！`)
              visible.value = false;
              routeList()
            })
          }else{
            route.update(formData).then(res => {
              Message.success(res.message || `编辑成功！`)
              visible.value = false;
              routeList()
            })
          }
          
        }
      })
      
    };
const addWaybill = () => {
  addModalRef.value.open(
    [
      {
        title: "提单号",
        required: true,
        dataIndex: "number",
      },
      {
        dataIndex: "departure",
        addDisplay: false,
        addDefaultValue:-1
      },
      {
        dataIndex: "destination",
        addDisplay: false,
        addDefaultValue:-1
      },
      {
        dataIndex: "parent_id",
        addDisplay: false,
        addDefaultValue:record.value.id
      },
    ],
    {
    viewType: 'modal',
    }, waybill.saveSon, '添加子提单', function () {
      routeList()
    }
  )
}
const deleteWaybill = async (id) =>{
  let res = await waybill.deletes({ids:[id]})
  routeList()
}
const shipmentList = (id) => {
   shipmentRouteList.value.onShow(id)
}
</script>

<template>
  <add-modal ref="addModalRef"></add-modal>
  <ShipmentRouteList ref="shipmentRouteList" />
  <a-grid-item :span="24" class="g-collapse height350">
  <a-collapse :default-active-key="['1']">
    
    <a-collapse-item header="子提单路由信息" key="1">
      <template #extra>
        <a-button-group>
          <a-button type="primary"  size="mini" @click.stop="addWaybill()" v-auth="['document:waybill:saveSon']"><icon-plus />添加子提单</a-button>
          <a-button type="primary"  size="mini" @click.stop="shipmentList()"  v-auth="['document:shipment:changeRoute']"><icon-list />分配路由</a-button>
        </a-button-group>
      </template>
      <template #header>
        <div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center">
          <div>子提单路由信息</div>
        </div>
      </template>
      <!-- /////////////// start ////////////////////////// -->
      <a-grid :cols="24">
        <a-grid-item :span="6" class="g-collapse height350" v-for="item in WaybillList">
          
      <a-collapse-item header="" key="1">
        <template #extra>
          <a-button-group>
            <a-button type="primary" size="mini" @click.stop="handleClick(item.id)"><icon-plus /></a-button>
            <a-popconfirm
              content="确定删除路由提单吗?"
              position="bottom"
              @click.stop=""
              @ok="deleteWaybill(item.id)"
              >
            <a-button type="primary" status="danger" size="mini"><icon-delete /></a-button>
          </a-popconfirm>
          <a-button type="primary" size="mini" @click.stop="shipmentList(item.id)"><icon-list /></a-button>
        </a-button-group>
        </template>
        <template #header>
          <div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center">
            <div>{{item.number}}</div>
          </div>
        </template>

        <a-timeline class="gt-timeline" v-for="route in item.route">
          <a-timeline-item :label="route.time">
            <div class="w-full flex justify-between">
              <div>{{route.type?route.type.name:route.remark}}</div>
              <ul class="arco-list-item-action"  v-if="!route.type">
                <li><a-button type="outline" size="mini" @click="editAction(route)"  v-auth="['routes:route:update']"><icon-edit /></a-button></li>
                <li>
                  <a-popconfirm 
                  content="确定要删除吗?"
                  position="bottom"
                  @ok="deleteAction(route.id)"
                >
                <a-button type="outline" size="mini" @click=""  v-auth="['routes:route:delete']"><icon-delete /></a-button>

                </a-popconfirm>
                  
                </li>
              </ul>
            </div>
          </a-timeline-item>
        </a-timeline>
        
      </a-collapse-item>
        </a-grid-item>
      </a-grid>
      <!-- /////////////// end ////////////////////////// -->

    </a-collapse-item>


    <a-modal v-model:visible="visible" width="600px">
        <template #title>
          <div >{{  formData.id == "" ? '新增' : '编辑'}}</div>
          </template>
          <a-form ref="formRef" :rules="rules" :model="formData">
            <a-form-item field="remark" label="描述" validate-trigger="blur">
              <a-input v-model="formData.remark"  placeholder="请输入描述" />
            </a-form-item>
            <a-form-item field="time" label="时间" validate-trigger="change">
              <a-date-picker
                style="width: 100%;"
                placeholder="请选择时间"
                show-time
                v-model="formData.time"
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>          
        </a-form>
        <template #footer>        
          <a-button @click="visible = false">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk(formRef)">
            确定
          </a-button>
        </template>
      </a-modal>
  </a-collapse>
  </a-grid-item>
</template>

<style>
.route-list ._crud-header,.route-list .mb-2,.route-list .operation-tools,.route-list .mb-1{
  display:none;
}
.height350 .arco-collapse-item-content{
  max-height:350px;
  overflow-y:scroll;
}
.height350 .arco-collapse-item-content::-webkit-scrollbar {
  display: none;
}
.height350 .arco-collapse-item-content{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.height350 .arco-list-item-action > li:not(:last-child) {
    margin-right: 5px !important;
}
</style>